<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{$Think.lang.investment_share}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="INDEX/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="INDEX/css/main.css"/>
    <style>
        .more_history {
            text-align: center;
            padding: 0.5em;
            background: #ffffff;
        }
      .mui-switch{
      		width:36px;
        	height:18px;
      }
      header div{
      		top : 30%;
      }
      .mui-switch .mui-switch-handle{
      		width:20px;
        	height:20px;
        left:-4px;
        top: -3px;
      }
      .mui-switch.mui-active:before{
      	top:-3px;
        left:1px;
      }
      .mui-switch.mui-active .mui-switch-handle {
    	-webkit-transform: translate(43px,0);
    	transform: translate(20px,0);
		}
      .mui-switch:before{
      		top:-3px;
        	left:15px;
      }
    </style>
</head>

<body>
<script src="INDEX/js/mui.min.js"></script>
<script src="INDEX/js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="INDEX/js/main.js"></script>
<header class="mui-bar mui-bar-nav">
    <a href="#offCanvasSide" class="right_top"></a>
    <!--<a class="mui-switch "></a>-->
    <div class="mui-switch mui-pull-right {if $think_var=='zh-cn'}mui-active{/if}" id="mySwitch" >
        <div class="mui-switch-handle"></div>
    </div>
    <h1 class="mui-title">{$Think.lang.project_title}</h1>
</header>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap  mui-slide-in">
    <div id="header">{include file='header'/}</div>
    <!--主界面部分-->
    <div class="mui-inner-wrap">

        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper mui-slide-in">
            <div class="mui-scroll" >
                <div class="main_content">
                    <div class="content_top">
                        <div>{$Think.lang.all_invset_money}</div>
                        <h4>${$balanceData.balance}</h4>
                    </div>
                    <div class="content_table">
                        <div class="total_day">
                            <div class="share_total">
                                <div>{$Think.lang.award_all}</div>
                                <div class="share_total_num" style="color: #DE2B2F;">${$sysData.all_earnings}</div>
                            </div>
                            <div class="share_day">
                                <div>{$Think.lang.award_day}</div>
                                <div class="share_day_num" style="color: #DE2B2F;">${$sysData.day_earnings}</div>
                            </div>
                        </div>
                        <div class="month_year">
                            <div class="share_month">
                                <div>{$Think.lang.award_month}</div>
                                <div class="share_month_num" style="color: #DE2B2F;">${$sysData.month_earnings}</div>
                            </div>
                            <div class="share_year">
                                <div>{$Think.lang.award_year}</div>
                                <div class="share_year_num" style="color: #DE2B2F;">${$sysData.year_earnings}</div>
                            </div>
                        </div>
                    </div>
                    <div class="range_name">
                        <div>{$Think.lang.award_chart} <span style="color: #E93F53;">{$Think.lang.award_units}(%)</span></div>
                        <div id="table_range"></div>
                    </div>
                    <div class="share_detail">
                        <div>{$Think.lang.award_list_show}</div>
                        <div class="history_table" style="display: block;">
                            <div style="width: 120%;overflow-x: scroll;">
                                <table border="0" cellspacing="10"cellpadding="20" rules="none" style="font-size: 0.80rem; width: 150%;;" >
                                    <tbody id="tabody">
                                    <tr>
                                        <td>{$Think.lang.principal}</td>
                                        <td>{$Think.lang.award_percent}</td>
                                        <td>{$Think.lang.award_money}</td>
                                        <td>{$Think.lang.account_days}</td>
                                        <td>{$Think.lang.give_out_date}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="more_history">{$Think.lang.put_load_more}</div>
                          <div style="clear: both; height: 50px;"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<script src="INDEX/js/switchover.js"></script>
<script src="INDEX/js/echarts.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
  mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();
    var more=document.getElementsByClassName("more_history")[0];
    more.addEventListener("tap", function () {
        pullfreshfunction();
    });
    var pageStart = 1;//开始数据条数
    pullfreshfunction();
    function pullfreshfunction() {
        var __self=this;
        var url = "{:Url('index/getloglist')}";
        var page = pageStart;
        var str="";
        mui.ajax({
            type: "post",
            url: url,
            timeout: 10000,
            data: {
                page: page
            },
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    var list = data.data;
                    for (i in list) {
                        str+= "<tr>"+
                                "<td>$"+list[i].principal+"</td>"+
                                "<td>"+list[i].percent+"%</td>"+
                                "<td>$"+list[i].money+"</td>"+
                                "<td>"+list[i].create_time+"</td>"+
                                "<td>"+list[i].create_time+"</td>"+
                                "</tr>";
                    }
                    document.getElementById("tabody").innerHTML+=str;
                    pageStart++;
                }else{
                     mui.toast(data.message);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败!!！" + textStatus);
            }
        });

    }

    var myChart = echarts.init(document.getElementById('table_range'));

    var option = {
        xAxis: {
            type: 'category',
            data: [{$strTime}]
        },
        yAxis: {
            type: 'value'
        },
        grid:{
                    x:30,
                    y:50,
                    x2:5,
                    borderWidth:1
                },
        series: [{
            data: [{$strNum}],
            type: 'line',
            showAllSymbol:true
        }]
    };
    myChart.setOption(option);
</script>
</body>

</html>